	<!-- 直播互动 -->
	<template>
		<view>
			<!-- @leftClick="$tools.switchTab('index/index')" -->
			<u-navbar title="直播互动" bgColor="transparent" :title-style="{'color':'#fff'}" leftIconColor="#fff" placeholder
				autoBack>
				<view class="u-nav-slot" slot="right">
					<u-icon v-if="!id" name="plus-circle" label="新增直播互动" labelColor="#fff" color="#fff" labelPos="left"
						labelSize="14" size="18" @click="show = true"></u-icon>
					<u-icon v-else name="checkmark-circle" label="添加直播互动" labelColor="#fff" color="#fff" labelPos="left"
						labelSize="14" size="18" @click="$tools.navTo('audio/chooseInteraction?id='+id)"></u-icon>
				</view>
			</u-navbar>
			<scroll-view scroll-y="true" style="height: 88vh;" @scrolltolower="reachBottom">
				<view class="listBox" v-if="livelist.length>0">
					<view class="pd30 item" v-for="(i,idx) in livelist" @click="handel(i,idx)">
						<view class="dfx box">
							<view class="icon1">
								<image src="../../static/img/hd.png" mode=""></image>
							</view>
							<view class="info">
								<view class="title">
									{{i.name}}
								</view>
								<view class="num df jb fs26">
									<text class="overHidden" style="width: 60%;">关键词：{{i.keyword}}</text>
									<text>互动回复：{{i.audio_urls.length}} 条</text>
								</view>
							</view>
							<view class="edit" @click.stop="handelClick(i)">
								<!-- 查看  -->
								<u-icon name="more-dot-fill" size="18"></u-icon>
							</view>
						</view>
						<view class="aList" v-if="activeId == i.id">
							<view class="item item1 dfx " v-for="(j,index) in i.audio_urls">
								<view class="icon">
									<view v-show="isPlay!=j.id" @click.stop="play(j)">
										<u-icon name="play-right" color="#fff" size="25"></u-icon>
									</view>
									<view v-show="isPlay==j.id" @click.stop="play()">
										<u-icon name="pause" color="#fff" size="25"></u-icon>
									</view>
								</view>
								<view class="info">
									<view class="title cfff">
										{{j.name}}
									</view>
								</view>
								<view class="" @click.stop="delAudio(j)">
									<u-icon name="trash" color="#fff" size="28"></u-icon>
								</view>
							</view>
						</view>
						<view class="text-center mt20" v-show="activeId == i.id" @click.stop="choose(i)">
							选择音频话术添加
						</view>
					</view>
				</view>
				<!-- 内容为空 -->
				<u-empty iconColor="#fff" textColor="#fff" marginTop="60" text="暂无直播互动" v-else mode="search"></u-empty>
			</scroll-view>
			<u-modal :show="show" title="新增直播互动" @confirm="confirm" @cancel="close" ref="uModal" asyncClose showCancelButton>
				<view class="slot-content" style="width: 100%;">
					<u--form labelPosition="left" :model="formData" labelWidth="70" :rules="rules" ref="uForm">
						<!-- <u-form-item label="所属讲解话术:" labelWidth="100" prop="oratory" ref="item1">
							<uni-combox :candidates="candidates" :border="false" placeholder="请选择所属讲解话术" emptyTips="未找到该讲解话术"
								v-model="formData.oratory"></uni-combox>
						</u-form-item> -->
						<u-form-item label="直播互动名称:" prop="name" labelWidth="100" ref="item1">
							<u--input v-model="formData.name" placeholder="请输入直播互动名称" border="none"></u--input>
						</u-form-item>
						<u-form-item label="关键词:" prop="keyword" ref="item1">
							<u--input v-model="formData.keyword" placeholder="多个关键词请用逗号隔开" border="none"></u--input>
						</u-form-item>
					</u--form>
				</view>
			</u-modal>
			<u-modal :show="showKeyword" title="编辑关键词" @confirm="keyConfirm" @cancel="showKeyword=false" ref="uModal"
				asyncClose showCancelButton>
				<view class="slot-content" style="width: 100%;">
					<u--form labelPosition="left" labelWidth="70" ref="uForm">
						<u-form-item label="关键词:" prop="keyword" ref="item1">
							<u--input v-model="keyword" placeholder="多个关键词请用逗号隔开" border="none"></u--input>
						</u-form-item>
					</u--form>
				</view>
			</u-modal>
		</view>
	</template>

	<script>
		export default {
			data() {
				return {
					showPop: false,
					showKeyword: false,
					show: false,
					isPlay: -1,
					title: '',
					info: {},
					livelist: [],
					formData: {
						name: '',
						keyword: '',
						oratory: '',
					},
					rules: {
						name: {
							type: 'string',
							required: true,
							message: '请输入直播互动名称',
							trigger: ['blur', 'change']
						},
						keyword: {
							type: 'string',
							required: true,
							message: '请输入关键词名称',
							trigger: ['blur', 'change']
						},
					},
					explains: [],
					candidates: [],
					activeInfo: {},
					activeId: '',
					keyword: '',
					id: '',
					formInline: {
						page: 1,
						limit: 10,
						total: 0
					},
				};
			},
			onLoad(e) {
				if (e && e.id) {
					this.id = e.id
				}
				this.getData()
				this.$tools.loadbgaudio()
			},
			onShow() {
				console.log('show');
				this.getData()
			},
			// 监听用户下拉刷新
			onPullDownRefresh() {
				this.getData()
				uni.stopPullDownRefresh()
			},
			onHide() {
				if (!this.isOpen) {
					this.$tools.clearAudio()
				}
			},
			onUnload() {
				if (!this.isOpen) {
					this.$tools.clearAudio()
				}
			},
			methods: {
				reachBottom() {
					console.log(111);
					if (this.formInline.total > this.livelist.length) {
						this.formInline.page++
						this.getData();
					}
				},
				getData() {
					let params = {
						...this.formInline
					}
					if (this.id) params.explain_id = this.id
					this.$api.interactList(params).then(res => {
						if (res.code == 200) {
							if (this.formInline.page == 1) {
								this.livelist = res.data.list
							} else {
								this.livelist = this.livelist.concat(res.data.list)
							}
							this.formInline.total = res.data.count

							/* if (this.isOpen && this.isOpen != -1 && this.isOpen != this.livelist.length - 1) {
								console.log('clear');
								this.isOpen = -1
								this.$tools.clearAudio()
							}  this.formInline = {
								page: 1,
								limit: 10,
								total: 0
							} */
							// this.$forceUpdate()
						} else {
							this.$tools.toast(res.msg);
						}
					})
				},
				confirm() {
					this.$refs.uForm.validate().then(res => {
						this.show = false

						// let arr = this.formData.keyword.split('，')
						let lastChar = this.formData.keyword.charAt(this.formData.keyword.length - 1);
						if (lastChar == '，') {
							this.formData.keyword = this.formData.keyword.slice(0, this.formData.keyword.length - 1);
						}
						let params = {
							...this.formData
						}
						console.log('111', params);
						this.$api.addInteract(params).then(res => {
							this.$tools.toast(res.msg);
							if (res.code == 200) {
								this.close()

								this.getData()
							}
						})
					})
				},
				keyConfirm() {
					this.show = false

					let lastChar = this.keyword.charAt(this.keyword.length - 1);
					if (lastChar == '，') {
						this.keyword = this.keyword.slice(0, this.keyword.length - 1);
					}
					let params = {
						...this.info,
						keyword: this.keyword
					}
					console.log('111', params);
					this.$api.editInteract(params).then(res => {
						this.$tools.toast(res.msg);
						this.showKeyword = false
						if (res.code == 200) {
							this.getData()
						}
					})
				},
				choose(i) {
					this.$tools.navTo(`audioLibrary/chooseSort?id=${i.id}&type=interaction`)
				},
				handel(j) {
					console.log(j);
					if (this.isPlay) {
						this.isPlay = -1
						this.$tools.clearAudio()
					}
					if (this.activeId) {
						if (this.activeId == j.id) {
							this.activeId = ''
							return
						} else {
							this.activeId = ''
						}
					}
					this.$nextTick(() => {
						this.livelist.map((i, index) => {
							if (j.id == i.id) {
								this.activeId = i.id
							}
						})
					})
					this.$forceUpdate()

				},
				handelClick(i) {
					uni.showActionSheet({
						itemList: ['编辑关键词', '删除该直播互动'],
						success: (res) => {
							console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
							switch (res.tapIndex) {
								case 0:
									this.info = {
										id: i.id,
										name: i.name
									}
									this.showKeyword = true
									this.keyword = i.keyword
									break;
								default:
									this.delItem(i)
									break;
							}
						},
						fail(res) {
							console.log(res.errMsg);
						}
					});
				},
				play(j) {
					if (j) {
						this.isPlay = j.id
						this.$tools.setA(j.url)
					} else {
						this.$tools.setA()
						this.$nextTick(() => {
							this.isPlay = -1
						})
					}
				},
				delItem(i) {
					uni.showModal({
						title: '提示',
						content: '确认删除吗？删除后将无法找回',
						success: (r) => {
							if (r.confirm) {
								let params = {}
								let api;
								if (this.id) {
									params.explain_id = this.id
									params.interact_id = i.id
									api = this.$api.delExplainInteract(params)
								} else {
									params.id = i.id
									api = this.$api.delInteract(params)
								}
								api.then(res => {
									this.$tools.toast(res.msg);
									if (res.code == 200) {
										this.livelist = []
										this.formInline = {
											page: 1,
											limit: 10,
											total: 0
										}
										this.getData()
									}
								})
							} else if (r.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				},
				delAudio(i) {
					uni.showModal({
						title: '提示',
						content: '确认删除吗？删除后将无法找回',
						success: r => {
							if (r.confirm) {
								let params = {
									audio_id: i.id,
									interact_id: this.activeId
								}
								this.$api.delInteractAudio(params).then(res => {
									this.$tools.toast(res.msg);
									if (res.code == 200) {
										this.formInline = {
											page: 1,
											limit: 10,
											total: 0
										}
										this.getData()
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				},
				close() {
					this.formData = {
						name: '',
						keyword: '',
						oratory: '',
					}
					this.show = false
				},
			}
		}
	</script>

	<style lang="less">
		/* /deep/.u-popup__content,
		/deep/.u-modal__title {
			background: #090d15;
			color: #fff;
		} */

		.listBox {
			margin: 30rpx;
			font-size: 15px;

			.aList {
				max-height: 30vh;
			}

			.item {
				background: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				justify-content: space-between;
				align-items: center;

				.box {
					justify-content: space-between;
					align-items: center;
				}

				.icon1 {
					width: 60rpx;
					height: 60rpx;
					border-radius: 8px;
					line-height: 60rpx;
					text-align: center;
					font-family: fantasy;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.info {
					line-height: 60rpx;
					font-weight: 600;
					width: 70%;

					.num {
						font-weight: 500;
					}
				}

				.edit {
					transform: rotate(90deg);
				}

				.item1 {
					background: #6a8bff;
					padding: 20rpx;
					margin-top: 35rpx;
				}


			}

			// .item:last-child {
			// 	margin-bottom: 0;
			// }
		}
	</style>